import React, { useEffect, useState } from 'react'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import axios from 'axios'

const { confirm } = Modal;

export default function RightList() {
    const [dataSource, setdataSource] = useState([
        // {
        //     key: '1',
        //     name: '胡彦斌',
        //     age: 32,
        //     address: '西湖区湖底公园1号',
        // },
        // {
        //     key: '2',
        //     name: '胡彦祖',
        //     age: 42,
        //     address: '西湖区湖底公园1号',
        // },
    ])
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            setdataSource(isChildren(res.data))
        })
    }, [])

    const isChildren = (item) => {
        return item.map(item => {
            // 将首页的子孩子删除
            if (!(item.children?.length)) {
                // item.children=''
                delete item.children
            }
            return item
        })
    }
    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            // content: 'When clicked the OK button, this dialog will be closed after 1 second',
            onOk() {
                deleteMethod(item)
            },

            onCancel() {
                // console.log('取消');
            },
        });
    }

    const deleteMethod = (item) => {
        // 当前页面同步状态+后端同步
        // 删除父亲item
        if (item.grade === 1) {
            setdataSource(dataSource.filter(data => data.id !== item.id))
            axios.delete(`/rights/${item.id}`)
        } else {
            // 删除儿子item
            setdataSource(dataSource.map(data => {
                if (data.id === item.rightId) {
                    // && data.children?.length > 0 可以不用,本来就是子找父
                    var child = data.children.filter(datas => datas.id !== item.id)
                    data.children = child
                    if (!data.children.length){
                        // 如果二级内容全部删除, 则让父的children属性置空
                        delete data.children
                    }

                }
                return data
            }))
            axios.delete(`/children/${item.id}`)
        }

    }
    const switchMethod=(item)=>{
        item.pagepermisson=item.pagepermisson===1?0:1
        setdataSource([...dataSource])

        if(item.grade===1){
            axios.patch(`/rights/${item.id}`,{
                pagepermisson: item.pagepermisson
            })
        }else{
            axios.patch(`/children/${item.id}`, {
                pagepermisson: item.pagepermisson
            })
        }
    }

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            },
        },
        {
            title: '权限名称',
            dataIndex: 'label',

        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key) => {
                return <Tag color='orange'>{key}</Tag>
            },
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />  
                    <Popover content={<div style={{textAlign:'center'}}>
                        {/* content里面的内容就是开关 */}
                        <Switch checked={item.pagepermisson} onChange={() => switchMethod(item)}></Switch>
                    </div>} 
                    title="页面配置项" trigger={item.pagepermisson === undefined?'':"click"} >
                        <Button type="primary" shape="circle" icon={<EditOutlined />} 
                            disabled={item.pagepermisson===undefined}/>

                    </Popover>
                </div>
            },
        },
    ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5,
            }} />
            
        </div>
    )
}
